<template>
  <div class="userContainer">
    <uv-swiper :list="swipers" @change="e => current = e.current" height="50vh" circular></uv-swiper>

    <!-- 浮动面板 -->
    <view class="floatingPanel">
      <view class="actionBtn flex alignCenter justifyCenter">
        <view class="item" @click="next">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349153146717.png" width="50px" height="50px"></uv-image>
        </view>
        <view class="item" @click="toFollow">
          <uv-image v-if="isFollow" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349152512282.png" width="50px" height="50px"></uv-image>
          <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293618528007139.png" width="50px" height="50px"></uv-image>
        </view>
        <view class="item" @click="instance.refs.applyForKnowRef.open(info)">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349151119457.png" width="50px" height="50px"></uv-image>
        </view>
      </view>

      <view class="user">
        <view class="flex">
          <view class="fz20 bold name">{{info.nickName}}·{{info.ageYear}}</view>
          <view class="tags flex alignCenter">
            <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isIdentityVerified=='已认证'">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284055787786887.png" width="14px" height="14px"></uv-image>
              <text>实名认证</text>
            </view>
            <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isCompanyVerified=='已认证'">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284750648136801.png" width="14px" height="14px"></uv-image>
              <text>工作认证</text>
            </view>
          </view>
        </view>
        <view class="grids gridColumns2 cells">
          <view class="grid flex alignCenter fz14 ">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284763012037721.png" width="10px" height="13px"></uv-image>
            <text>{{info.city}}，{{info.homeEconomize}}</text>
          </view>
          <view class="grid flex alignCenter fz14 ">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284765568488117.png" width="15px" height="15px"></uv-image>
            <text>{{info.height}}·{{info.weight}}</text>
          </view>
          <view class="grid flex alignCenter fz14 ">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284771341118273.png" width="15px" height="15px"></uv-image>
            <view class="flex justifyCenter" style="margin-left: 8px;">
              <view>{{info.industry}}</view>
              <view v-if="info.foreignCompanyName">·{{info.foreignCompanyName}}</view>
            </view>
          </view>
          <view class="grid flex alignCenter fz14 ">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284771339725847.png" width="15px" height="15px"></uv-image>
            <text>{{info.edu}}·{{info.school}}</text>
          </view>
        </view>
      </view>

      <view class="desc" v-if="dynamicTotal">
        <view class="name fz14 bold flex alignCenter justifyBetween">
          <view class="flex alignCenter">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284780109693964.png" width="24px" height="24px"></uv-image>
            <text class="fz18" style="color: ##41416E;margin-left: 5px;">个人动态</text>
          </view>
          <view class="flex alignCenter fz14">
            <text style="color: #41416E;margin-right:5px;">查看全部{{dynamicTotal}}条</text>
            <uv-icon name="arrow-right" size="13"></uv-icon>
          </view>
        </view>
        <view class="grids dynamic">
          <view class="item shrink" v-for="(item, index) in dynamicList" :key="index">
            <view class="con" v-if="item.medias.length">
              <image :src="item.medias[0]" mode="aspectFill" @click="proxy.$auth.previewImage(item.medias,0)" />
            </view>
            <view class="con Copywriting" v-else>
              <view class="bold TBold">T</view>
              <view class="write fz12">{{item.text}}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="address flex alignCenter fz12" v-if="info.distance">
        <uv-icon name="map-fill" color="#B2B2C2"></uv-icon>
        <text>距你 {{info.distance}}km {{info.district}}</text>
      </view>

      <view class="wrap">
        <view v-if="queryInfo_format(1)">
          <view class="title flex alignCenter">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284867663885371.png" width="24px" height="24px"></uv-image>
            <text>自我描述</text>
          </view>
          <view class="descText fz14">{{queryInfo_format(1).tbDescribe}}</view>
        </view>

        <view style="margin-top: 25px;" v-if="queryInfo_format(4)">
          <view class="title flex alignCenter">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284872297727960.png" width="18px" height="20px"></uv-image>
            <text>兴趣爱好</text>
          </view>
          <view class="descText fz14">{{queryInfo_format(4).tbDescribe}}</view>
        </view>

        <view style="margin-top: 25px;" v-if="queryInfo_format(2)">
          <view class="title flex alignCenter">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284875197274025.png" width="24px" height="24px"></uv-image>
            <text>爱情观</text>
          </view>
          <view class="descText fz14">{{queryInfo_format(2).tbDescribe}}</view>
        </view>

        <view style="margin-top: 25px;" v-if="queryInfo_format(6)">
          <view class="title flex alignCenter">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/1728488396837100.png" width="24px" height="24px"></uv-image>
            <text>理想的另一半</text>
          </view>
          <view class="descText fz12">{{queryInfo_format(6).tbDescribe}}</view>
        </view>
      </view>
    </view>
    <applyForKnow ref="applyForKnowRef"></applyForKnow>
  </div>
</template>

<script setup lang="ts">
//申请认识
import applyForKnow from "@/pages/tabbar/tabbar-1/components/applyForKnow.vue";
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let props = defineProps(["info", "navHeight"]);
const emit = defineEmits(["next"]);

let swipers = ref([]);
let authInfo = ref({}); //实名认证
let info = ref({});
let queryInfoList = ref([]); //查询信息
let authType = ref(1); //认证类型
let dynamicList = ref([]); //动态列表
let dynamicTotal = ref(0); //动态总数
let current = ref(0); //当前轮播图索引
let isFollow = ref(false); //关注状态
let touchHeight = ref(0); // 记录触摸的高度
let scrollTop = ref(0); // 记录滚动条高度
let scrollY = ref(false); // 记录滚动条是否滚动
let windowHeight = counter.systemInfo.windowHeight;
let show = ref(false); // 显示隐藏

let allHeight = computed(() => {
  return windowHeight - 30 - 33 - props.navHeight;
});

let scrollYFunc = computed(() => {
  let a = false;
  if (touchHeight.value > counter.systemInfo.windowHeight / 2) {
    a = true;
  }
  return a;
});

function scroll(e) {
  scrollTop.value = e.detail.scrollTop;
}

async function getDynamic() {
  let { records, total } = await proxy.$apis.movements({
    page: 1,
    pageSize: 4,
    userId: info.value.userId,
  });
  if (records.length) {
    dynamicList.value = records[0].data;
    dynamicTotal.value = total;
    console.log("动态", records[0].data);
  }
}

async function getInfo() {
  let picArr = [];
  let pics = await proxy.$apis.queryUserPic({ userId: info.value.userId });
  pics.forEach((element) => {
    picArr.push(element.pictureUrl);
  });
  picArr.unshift(info.value.logo);
  swipers.value = [...picArr];

  //查询信息
  queryInfoList.value = await proxy.$apis.queryInfo({
    userId: info.value.userId,
  });

  //实名认证
  authInfo.value = await proxy.$apis.userRealInfo({
    userId: info.value.userId,
  });
}

function queryInfo_format(type) {
  let index = proxy.$utils.findIndexByField(queryInfoList.value, "type", type);
  if (index != -1) return queryInfoList.value[index];
}

function next() {
  emit("next");
}

async function toFollow() {
  await toFollowFunc();
  getFollowStatus();
}

async function toFollowFunc() {
  //已关注
  if (isFollow.value) {
    await proxy.$apis.userUnFocus({ friendId: info.value.userId });
    proxy.$utils.showToast("已取消关注");
  } else {
    await proxy.$apis.contacts({ friendId: info.value.userId });
    proxy.$utils.showToast("已成功关注");
  }
}

//关注状态
async function getFollowStatus() {
  isFollow.value = await proxy.$apis.attentionToIt({
    friendId: info.value.userId,
  });
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue && !proxy.$utils.isEmptyObject(newValue)) {
      info.value = props.info;
      getInfo();
      getDynamic();
      getFollowStatus();
    }
  },
  { immediate: true, deep: true }
);
</script>



<style lang="scss" scoped>
.floatingPanel {
  border-radius: 25px 25px 0 0;
  position: relative;
  background-color: #e2fefd;
  // top: -5vw;
  .actionBtn {
    position: absolute;
    top: -33px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;
    .item {
      background: white;
      padding: 8px;
      border-radius: 50%;
      margin: 0 10px;
    }
  }
}

.user {
  padding: 45px 15px;
  border-bottom: 1px solid #e2e7f4;
  .cells {
    margin-top: 30px;
    gap: 8px 0; //上下间距 左右间距
    .grid {
      text {
        margin-left: 8px;
      }
    }
  }
  .name {
    color: #41416e;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .tags {
    .tag {
      margin-left: 10px;
      padding: 3px 10px;
      border-radius: 13px;
      text {
        margin-left: 3px;
      }
    }
    .tag:first-child {
      color: white;
      background-color: #4ce2ef;
    }
    .tag:last-child {
      color: white;
      background-color: #fb8888;
    }
  }
}
.wrap {
  padding: 15px;
  .title {
    font-size: 18px;
    color: #41416e;
    text {
      margin-left: 5px;
    }
  }
  .descText {
    color: #41416e;
    background-color: #f7f7f7;
    padding: 15px 20px;
    border-radius: 10px;
    margin-top: 15px;
  }
}
.address {
  margin: 5px 0;
  color: #b2b2c2;
  text {
    margin-left: 3px;
  }
}
.auth {
  background-color: #f6efff !important;
}

.desc {
  margin-top: 15px;
  color: #2c2c48;
  padding: 0 15px;
  .descText {
    margin-top: 10px;
  }
}
.dynamic {
  gap: 0 10px; //上下间距 左右间距
  .item {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    margin-top: 10px;
    .con {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      overflow: hidden;
      image {
        height: 100%;
        display: block;
      }
    }
    .Copywriting {
      background-color: #f7f7f7;
      .TBold {
        padding: 10px;
      }
      .write {
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 20px);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      }
    }
  }
}
</style>



